---
const { data } = Astro.props;

const images: string[] = []

data.images.forEach((item: string, index: number) => {
  const path = `/images/${data.localImagesPath}/${index}.jpg`
  images.push(path)
});

---

<div class="image-info border-b border-gray-800">
	<div class="container mx-auto px-4 py-16 flex flex-col items-center">
    <div class="md:ml-24">
			<h2 class="text-4xl mt-4 md:mt-0 mb-2 font-semibold"  transition:name={`${data.localImagesPath}-title`}>{data.content}</h2>
			<div class="flex flex-wrap items-center text-gray-400 text-md">
				<span>《{data.origin}》</span>
				<span class="mx-2">|</span>
				<span>{data.author}</span>
        <span class="mx-2">|</span>
				<span>{data.date}</span>
			</div>
		</div>
		<div class="flex flex-wrap w-full md:w-3/4 mt-5">
      {
        images.map((item, index) => {
          return <img
            src={item}
            alt={`${data.content}`}
            class="hover:opacity-75 transition ease-in-out duration-150 w-full md:w-1/2"
            id={`image-poster-${data.localImagesPath}-${index}`}
            transition:name={`poster-${data.localImagesPath}-${index}`}
          />
        })
      }
		</div>
	</div>
</div>